<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电脑商城</title>
    <style>
    </style>
</head>
<body>
<h1>电脑商城</h1>

<div id="products">
    <div class="product">
        <img src="product1.jpg" alt="Product 1">
        <h2>商品1</h2>
        <p>商品描述1</p>
        <button onclick="addToCart(1)">加入购物车</button>
    </div>

    <div class="product">
        <img src="product2.jpg" alt="Product 2">
        <h2>商品2</h2>
        <p>商品描述2</p>
        <button onclick="addToCart(2)">加入购物车</button>
    </div>
</div>

<div id="cart">
    <h2>购物车</h2>
    <ul id="cart-items">
    </ul>
    <button onclick="checkout()">结算</button>
</div>

<script>
    var cartItems = [];
    function addToCart(productId) {
        cartItems.push(productId);
        updateCart();
    }
    function updateCart() {
        var cartList = document.getElementById("cart-items");
        cartList.innerHTML = "";

        for (var i = 0; i < cartItems.length; i++) {
            var li = document.createElement("li");
            li.textContent = "商品" + cartItems[i];
            cartList.appendChild(li);
        }
    }
    function checkout() {
        alert("结算成功！");
        cartItems = [];
        updateCart();
    }
</script>
</body>
</html>